<template>
  <section class="todoapp">
    <!-- 头部部分 -->
  <MyHeader @pushList="pushList" />

    <!-- 主体部分 -->
    <MyBody :list="renderList" @addList="addList" @removeList="removeList" />

    <!-- 底部部分 -->
    <MyFooter :surpluesList="surpluesList" @clearList="clearList" :isDone="isDone" :type="type" @changeType="changeType" />
  </section>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyBody from '@/components/MyBody.vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  components:{
    MyHeader,MyBody,MyFooter
  },
  data () {
  return {
    list: [
      { id: 1, name: '吃饭', isDone: true },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '打豆豆', isDone: true }
    ],
    type:'all'
  }
},
methods:{
  addList(id){
  const obj= this.list.find(item=>item.id===id)
  obj.isDone=!obj.isDone
  },
  removeList(id){
   this.list=this.list.filter(item=>item.id!==id)
  },
  pushList(text){
    const obj={id:+new Date(),name:text,isDone:false}
    this.list=[obj,...this.list]
  },
  clearList(){
   this.list=this.list.filter(item=>!item.isDone)
  },
  changeType(type){
   this.type=type
  }
},
computed:{
  surpluesList(){
    return this.list.filter(item=>!item.isDone).length
  },
  isDone(){
    return this.list.some(item=>item.isDone)
  },
  renderList(){
    switch (this.type) {
      case 'all':
       return this.list ;
      case 'active':
       return this.list.filter(item=>!item.isDone) ;
    case 'completed':
       return this.list.filter(item=>item.isDone) ;
      default:
        return this.list
    }
  }
}
}
</script>

<style></style>
